---
section: Getting Started
title: Installation
slug: /docs/installation/
order: 2
---

# Installation

Learn how to get xstyled up and running in your project.

<carbon-ad />

## Using styled-components

[styled-components](https://styled-components.com/) is a good default choice if you don't know about CSS-in-JS libraries.

If you already use styled-components on your project, then you should read [Migrate from styled-components guide](/docs/migrate-from-styled-components/).

### Install styled-components and xstyled via npm

```
npm install styled-components @xstyled/styled-components
```

### Setup `theme` and `Preflight`

```js
// App.js
import {
  defaultTheme,
  ThemeProvider,
  Preflight,
} from '@xstyled/styled-components'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}
```

### Write your first component

```js
import { x } from '@xstyled/styled-components'

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}
```

## Using Emotion

[Emotion](https://emotion.sh/) is as good as [styled-components](https://styled-components.com/), using it is also a good choice!

If you already use Emotion on your project, then you should read [Migrate from Emotion guide](/docs/migrate-from-emotion/).

### Install emotion and xstyled via npm

```
npm install @emotion/react @emotion/styled @xstyled/emotion
```

### Setup `theme` and `Preflight`

```js
// App.js
import { defaultTheme, ThemeProvider, Preflight } from '@xstyled/emotion'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}
```

### Write your first component

```js
import { x } from '@xstyled/emotion'

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}
```
